<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>图片列表</title>
		<!-- css代码 start -->
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/global.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" />
		<link href="../../../css/task.css" rel="stylesheet" />
		<style>
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			
			
			.mui-preview-header .mui-preview-indicator {
				display: none;
			}
			
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
					
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
			.item_box .item .bar {
				height: auto;
			}
			.item_box .item .text span {
				width: 98px;
			}
		</style>
		<!-- css代码 end -->
	</head>
	<body>
		
		<div id="div"></div>
		<div id="popover" class="mui-popover shadow popover">
		 <p class="title" id="title">您确定要删除该图片信息吗？</p >
		 <div class="btn_box">
		  
		  <span class="fl" onclick="closePopover()">取消</span>
		  <span class="fr red" onclick="fixedDel()">确定</span>
		 </div>
		</div>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">图片信息列表</h1>
		</header>
		
		<div class="mui-content">
			<div hidden>
				<input type="hidden" id="helpId" />
				<input type="hidden" id="serviceNo" />
			</div>
			<div class="item_box" id="itemBox">
				<!-- <div class="item" >
					<div class="bar">
						<span class="del">删除</span>
						<span class="number">1170001<img src="../../../images/icon_68.png" /></span>
					</div>
					<div class="text">
						张三
						<span>FSE：</span> 
					</div>
					<div class="text">
						2020-03-15 09:35
						<span>上传时间：</span> 
					</div>
					<div class="type">
						<p>图片说明<img src="../../../images/icon_69.png"/></p>
						<p class="t_info">检测混在产品中的金属异物以及密度较大的非金属异物等</p>
					</div>
				</div> -->
			</div>
			<div class="btn_box">
				<span id="addPic" class="fl red one">添加图片</span>
			</div>
		</div>

		<!-- js代码 start -->

		<!-- 基础js start -->
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/utils/h.js"></script>
		<script src="../../../js/constant.js"></script>
		<script src="../../../js/common.js"></script>
		<script src="../../../js/utils/base64.js"></script>
		<script src="../../../js/utils/md5.js"></script>
		<script src="../../../js/utils/sortMap.js"></script>
		<script src="../../../js/utils/http.js"></script>
		<script src="../../../js/app.js"></script>
		<!-- 基础js end -->
		<script src="../../../js/mui.zoom.js"></script>
		<script src="../../../js/mui.previewimage.js"></script>

		<script type="text/javascript" charset="utf-8">
			
			var needDelId;
			var needDelObj;
			function fixedDel() {
				mui("#popover").popover('toggle', document.getElementById("div"));
				ajaxGet(BASE_URL + "cc/service/annex/deleteAnnexById", {
					id: needDelId
				}, function(data) {
					if (data.code === 200) {
						 app.toast('删除成功')
						 h(needDelObj).parent().parent().remove()
					} else {
						app.toast(data.msg)
					}
				}, function(errorMsg) {
					app.toast(errorMsg)
				});
			}
			
			function closePopover() {
				mui("#popover").popover('toggle', document.getElementById("div"));
			}
			
			function delPic(_this, id) {
				needDelId = id;
				needDelObj = _this
				mui("#popover").popover('toggle', document.getElementById("div"));
			}
			
			function selPicture(){
				ajaxGet(BASE_URL + "cc/service/annex/selectReportPortAnnexs", {
					"serviceNo": h('#serviceNo').val(),
					"helpId": h('#helpId').val()
				}, function(data) {
			
					if (data.code === 200) {
						 var str = ``;
						 for(var c = 0;c<data.data.length;c++){
							 str += `
								 <div class="item" >
									<div class="bar">
										<span class="del" onclick="delPic(this, ${data.data[c].id})">删除</span>
										<span class="number" data-preview-src="${BASE_PROFILE_URL + data.data[c].filePath}" data-preview-group="${c}"><img src="../../../images/icon_387.png"/>${data.data[c].fileName || ''}</span>
									</div>
									<div class="text">
										<span><img src="../../../images/icon_219.png"/>FSE：</span>
										${data.data[c].fseName || ''}	 
									</div>
									<div class="text">
										<span><img src="../../../images/icon_202.png"/>上传时间：</span>
										${data.data[c].createTime}									 
									</div>
									<div class="text">
										<span><img src="../../../images/icon_386.png"/>图片说明：</span>
										${data.data[c].fileDescription || ''}
									</div>
								 </div>
							 `
						 }
						 h('#itemBox').html(str);
						 mui.previewImage();
						 if (submitStatus == '1') {
							 h('.del').hide()
						 }
					} else {
						app.toast(data.msg)
					}
				}, function(errorMsg) {
					app.toast(errorMsg)
				});
			}
			
			function addPictureSuccess() {
				console.log("图片添加成功")
				selPicture();
			}
			
			// 提交状态 0未提交 1已提交
			var submitStatus = 0;
			
			(function($, doc) {
				$.init();
		
				$.plusReady(function() {
					var self = plus.webview.currentWebview();
					var wo = self.opener();
					submitStatus = self.submitStatus
					h('#serviceNo').val(self.serviceNo);
					h('#helpId').val(self.helpId); 
					if (submitStatus == '1') {
						h('#addPic').hide()
					}
	
					
					h('#addPic').tap(function() {
						app.jumpTo('add.html','view/service/picture/add.html', {
							"serviceNo": h('#serviceNo').val(),
							"helpId": h('#helpId').val()
						})
					})
					
					selPicture();
					
					$.back = function(event) {
						wo.evalJS('updatePictureSize(' + h('.item').length + ')')
						plus.webview.currentWebview().close()
					}
				});
			}(mui, document));
		</script>
		<!-- js代码 end -->
	</body>
</html>
